<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 418.48px;height: 227.06px;"></div>
	</div>
</template>
 
<script>
	export default {
		name: 'capital1',
		data() {
			return{
				ncockpitData:[],
				qcockpitData:[]
			}
		},
		mounted() {
			this.getList()
			
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
							"normGuid": "f006c43f-dfa7-4967-abb2-a9ead4e4ba4f",
							"fieldList": [{
								"key": "dimension",
								"value": "当年"
							}, {
								"key": "area",
								"value": "浙江"
							}, {
								"key": "mapping_code",
								"value": "新材料"
							}]
						}
				};
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.qcockpitData=result.cockpitData
				this.$nextTick(()=>{
					this.myEcharts();
				})
			},
			myEcharts() {
				let sjnum=this.qcockpitData.map(item=>{
					return item.sjnum
				})
				
				let rzje=this.qcockpitData.map(item=>{
					return item.rzje.toFixed(1) 
				})
				
				let itemTitle=this.qcockpitData.map(item=>{
					return item.tjqj
				})
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				let colorArr = ["#8EF0FF", '#CFB8F3']
				let dataList = []
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				let ii=0
				let rzMax=0
				let rzInterval=0
				rzje.forEach(item=>{
					if(item==0.0){
						ii++
					}
				})
				if(ii==rzje.length){
					rzMax=Math.ceil(1 / 5) * 5
					rzInterval=Math.ceil(1 / 5)
				}else{
					rzMax=Math.ceil(Math.max.apply(null, rzje) / 5) * 5
					rzInterval=Math.ceil(Math.max.apply(null, rzje) / 5)
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					tooltip: {
						show: false,
					},
					legend: {
						show: false,
					},
					grid: {
						left: '6%',
						right: '6%',
						top: '20%',
						width: "88%",
						height:'75%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						axisTick :{
							show:false,
						},
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 17,
							interval:0,
						},
						data: itemTitle,
						type: 'category',
						show: true,
					}],
					yAxis: [{
						id:0,
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						name:'融资事件数量(起)',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
							padding: [0,0, 10, 30]
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							margin: 10,
						},
						splitNumber: 5,
						interval:Math.ceil(Math.max.apply(null, sjnum) / 5), //Math.max.apply取出数组最大值
						max:Math.ceil(Math.max.apply(null, sjnum) / 5) * 5, //Math.ceil向上取整
						min:0,
					},
					{
						id:1,
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false
						},
						name:'披露融资金额(亿元)',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
							padding: [0,35, 10, 0]
						},
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							margin: 10,
							interval:0.2,
						},
						splitNumber: 5,
						interval:rzInterval, //Math.max.apply取出数组最大值
						max:rzMax, //Math.ceil向上取整
						min:0,
						// max:null
					}
					],
					series: [
						{
						    type: 'bar',
						    name:'2019',
						    barWidth: 12,
						    data:sjnum,
							yAxisIndex: 0, 
							label: {
								show: true,
								position: 'top', // 位置
								color: '#C1E2FF',
								fontSize: 15,
								fontWeight:600,
								distance: 12, // 距离
								formatter: '{c}' // 这里是数据展示的时候显示的数据
							}, // 柱子上方的数值
							// barGap:'115%',
						    itemStyle: {
						      borderRadius:[4,4,4,4],
						      color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
						        [{
						          offset: 0, color: '#2682FF' // 0% 处的颜色
						        }, {
						          offset: 1, color: '#04CDF4' // 100% 处的颜色
						        }])
						    }
						  },
						  {
						    type: 'bar',
						    name:'2020',
						    barWidth: 12,
						    data:rzje,
							yAxisIndex: 1, 
							barGap:1.5,
							label: {
								show: true,
								position: 'top', // 位置
								color: '#C1E2FF',
								fontSize: 15,
								fontWeight:600,
								distance: 0, // 距离
								formatter: '{c}' // 这里是数据展示的时候显示的数据
							}, // 柱子上方的数值
							// barGap:'115%',
						    itemStyle: {
						      color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
						          [{
						            offset: 0, color: '#712ACE' // 0% 处的颜色
						          }, {
						            offset: 1, color: '#AF89EB' // 100% 处的颜色
						          }]),
						      borderRadius:[4,4,4,4]
						    }
						  }
						]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
			}
		},
	}
</script>


<style>

</style>
